<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平行四边形分割可视化工具</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        h1 {
            color: #333;
            margin-bottom: 20px;
        }
        
        #canvas {
            border: 2px solid #333;
            background-color: white;
            cursor: crosshair;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .controls {
            margin-top: 20px;
            display: flex;
            gap: 10px;
        }
        
        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #0056b3;
        }
        
        .info {
            margin-top: 10px;
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>平行四边形分割可视化工具</h1>
    <canvas id="canvas" width="600" height="400"></canvas>
    <div class="controls">
        <button onclick="resetParallelogram()">重置图形</button>
    </div>
    <div class="info">
        拖拽顶点调整平行四边形形状，观察分割线的变化
    </div>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        // 平行四边形顶点
        let vertices = [
            { x: 150, y: 100 }, // 左上
            { x: 350, y: 100 }, // 右上
            { x: 450, y: 250 }, // 右下
            { x: 250, y: 250 }  // 左下
        ];
        
        let draggedVertex = null;
        
        // 绘制平行四边形
        function drawParallelogram() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制平行四边形
            ctx.beginPath();
            ctx.moveTo(vertices[0].x, vertices[0].y);
            for (let i = 1; i < vertices.length; i++) {
                ctx.lineTo(vertices[i].x, vertices[i].y);
            }
            ctx.closePath();
            ctx.strokeStyle = '#333';
            ctx.lineWidth = 2;
            ctx.stroke();
            ctx.fillStyle = 'rgba(200, 200, 255, 0.3)';
            ctx.fill();
            
            // 绘制顶点
            vertices.forEach((vertex, index) => {
                ctx.beginPath();
                ctx.arc(vertex.x, vertex.y, 5, 0, 2 * Math.PI);
                ctx.fillStyle = '#007bff';
                ctx.fill();
                ctx.strokeStyle = '#fff';
                ctx.lineWidth = 2;
                ctx.stroke();
                
                // 标注顶点
                ctx.fillStyle = '#333';
                ctx.font = '12px Arial';
                const labels = ['A', 'B', 'C', 'D'];
                ctx.fillText(labels[index], vertex.x + 10, vertex.y - 10);
            });
            
            // 计算并绘制分割线
            drawDividingLine();
        }
        
        // 绘制分割线
        function drawDividingLine() {
            // 选择上边作为要分割的对边
            const topLeft = vertices[0];
            const topRight = vertices[1];
            const bottomLeft = vertices[3];
            const bottomRight = vertices[2];
            
            // 计算上边的中点（1:1分割点）
            const midPoint = {
                x: (topLeft.x + topRight.x) / 2,
                y: (topLeft.y + topRight.y) / 2
            };
            
            // 计算下边的中点
            const bottomMidPoint = {
                x: (bottomLeft.x + bottomRight.x) / 2,
                y: (bottomLeft.y + bottomRight.y) / 2
            };
            
            // 绘制分割点
            ctx.beginPath();
            ctx.arc(midPoint.x, midPoint.y, 4, 0, 2 * Math.PI);
            ctx.fillStyle = '#ff0000';
            ctx.fill();
            ctx.strokeStyle = '#fff';
            ctx.lineWidth = 2;
            ctx.stroke();
            
            // 标注分割点
            ctx.fillStyle = '#ff0000';
            ctx.font = '12px Arial';
            ctx.fillText('M', midPoint.x + 10, midPoint.y - 10);
            
            // 绘制下边中点
            ctx.beginPath();
            ctx.arc(bottomMidPoint.x, bottomMidPoint.y, 4, 0, 2 * Math.PI);
            ctx.fillStyle = '#00ff00';
            ctx.fill();
            ctx.strokeStyle = '#fff';
            ctx.lineWidth = 2;
            ctx.stroke();
            
            // 标注下边中点
            ctx.fillStyle = '#00ff00';
            ctx.fillText('N', bottomMidPoint.x + 10, bottomMidPoint.y - 10);
            
            // 绘制分割线（连接M和N）
            ctx.beginPath();
            ctx.moveTo(midPoint.x, midPoint.y);
            ctx.lineTo(bottomMidPoint.x, bottomMidPoint.y);
            ctx.strokeStyle = '#ff0000';
            ctx.lineWidth = 2;
            ctx.setLineDash([5, 5]);
            ctx.stroke();
            ctx.setLineDash([]);
            
            // 绘制比例标记
            ctx.fillStyle = '#666';
            ctx.font = '10px Arial';
            ctx.fillText('1:1', midPoint.x - 15, midPoint.y - 15);
        }
        
        // 鼠标事件处理
        canvas.addEventListener('mousedown', (e) => {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            // 检查是否点击了顶点
            for (let i = 0; i < vertices.length; i++) {
                const vertex = vertices[i];
                const distance = Math.sqrt((x - vertex.x) ** 2 + (y - vertex.y) ** 2);
                if (distance <= 10) {
                    draggedVertex = i;
                    break;
                }
            }
        });
        
        canvas.addEventListener('mousemove', (e) => {
            if (draggedVertex !== null) {
                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                // 限制在画布范围内
                vertices[draggedVertex].x = Math.max(10, Math.min(canvas.width - 10, x));
                vertices[draggedVertex].y = Math.max(10, Math.min(canvas.height - 10, y));
                
                drawParallelogram();
            }
        });
        
        canvas.addEventListener('mouseup', () => {
            draggedVertex = null;
        });
        
        // 重置平行四边形
        function resetParallelogram() {
            vertices = [
                { x: 150, y: 100 },
                { x: 350, y: 100 },
                { x: 450, y: 250 },
                { x: 250, y: 250 }
            ];
            drawParallelogram();
        }
        
        // 初始绘制
        drawParallelogram();
    </script>
</body>
</html>
